<template>
    <div id="login-body">
        <div class="login-div">
            <el-form ref="loginForm" :model="user" :rules="rules" :size="formSize" label-width="120px" status-icon>
                <el-form-item label="Phone" prop="phone">
                    <el-input v-model="user.phone" placeholder="phone Number" clearable />
                </el-form-item>
                <el-form-item label="Password" prop="password">
                    <el-input v-model="user.password" placeholder="password" autocomplete="off" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm(loginForm)">Submit</el-button>
                    <el-button @click="resetForm(loginForm)">Reset</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
  
<script lang="ts" setup>
import { doLogin } from '@/api/index'
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { useRouter } from 'vue-router';
const loginForm = ref<FormInstance>()
const formSize = ref('default')

const router = useRouter();
interface RuleForm {
    phone: string
    password: string
}
const rules = reactive<FormRules<RuleForm>>({
    phone: [
        {
            required: true,
            message: 'please write  phine number!',
            trigger: 'change',
        },
    ],
    password: [
        {
            required: true,
            message: 'Please write password',
            trigger: 'change',
        },
    ],
})

// do not use same name with ref
const user = reactive<RuleForm>({
    phone: '17688676423',
    password: '123456',
})




const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            doLogin(user).then(res => {
                console.log(res, "请求数据");
                localStorage.setItem('Authorization', res.data);
                router.push("/")
            }).catch(error => {
                console.log(error, "报错信息");
            })
            console.log('submit!')
        } else {
            console.log('error submit!', fields)
        }
    })
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}
</script>

<style scoped>
#login-body {
    display:flex ;
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 100%;
    background-image: url("@/assets/img/home.webp");
    background-size: cover;
    width: 100%;
    height: 100%;
}

.login-div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    height: 400px;
    width: 400px;
    background-color: #121421;
    opacity: 0.8;
    border-radius: 10px;
    transform: translate(-50%,-50%);
    ;
}

.login-div form {
    text-align: center;
    position: absolute;
    top: 30%;
    left: 5%;
}
</style>